/*
 * @Author: kanglang
 * @Date: 2020-10-12 14:46:29
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-04-15 16:42:19
 * @Description: 文章item
 */
import React from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity, PixelRatio } from 'react-native';
import { px2dp, mainBgColorWhite } from '@/styles';
import { insuranceEye } from '@/images';

const ArticleCell = ({
  source,
  type,
  onPress
}) => {
  const imageId = source && source.imageId;
  const createTime = source && `${source.createTime.substring(0, 4)}年${source.createTime.substring(5, 7)}月${source.createTime.substring(8, 10)}日`;
  const submit = (item) => {
    item.type = type;
    onPress && onPress(item);
  };

  return (
    <TouchableOpacity
      activeOpacity={0.8}
      style={styles.container}
      onPress={() => submit(source)}
    >
      <View style={styles.inner}>
        <Text style={styles.title} numberOfLines={2}>{source && source.contentTitle}</Text>
        <View style={[styles.secondBox, !!imageId && { marginTop: px2dp(30) }]}>
          <Text style={styles.createTime}>{createTime}</Text>
          <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: px2dp(40) }}>
            <Image style={{ width: px2dp(16 * 2), height: px2dp(12 * 2) }} source={insuranceEye} />
            <Text style={{ marginLeft: px2dp(8), color: '#999793', fontSize: px2dp(24) }}>{`${source.showTimes}人`}</Text>
          </View>
        </View>
      </View>
      {
        !!imageId && <Image style={styles.image} source={{ uri: imageId }} />
      }
    </TouchableOpacity>
  );
};
export default ArticleCell;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: mainBgColorWhite,
    borderBottomColor: '#F2F3F7',
    borderBottomWidth: px2dp(1),
    marginHorizontal: px2dp(32),
    paddingVertical: px2dp(25)
  },
  inner: {
    flex: 1,
    justifyContent: 'space-between'
  },
  title: {
    fontSize: px2dp(32),
    color: '#343332',
    lineHeight: px2dp(40)
  },
  secondBox: {
    flexDirection: 'row',
    // justifyContent: 'space-between',
    marginTop: px2dp(16),
  },
  typeBox: {
    borderColor: '#F7E0B2',
    borderWidth: 1 / PixelRatio.get(),
    paddingHorizontal: px2dp(5),
    borderRadius: px2dp(4),
    justifyContent: 'center',
    alignItems: 'center',
    textAlignVertical: 'center',
    paddingVertical: 0
  },
  type: {
    fontSize: px2dp(24),
    color: '#919399'
  },
  createTime: {
    fontSize: px2dp(24),
    color: '#919399',
    // marginLeft: px2dp(16)
  },
  image: {
    width: px2dp(214),
    height: px2dp(160),
    marginLeft: px2dp(60),
    borderRadius: px2dp(8)
  }
});
